<template>
  <div class="tabbars">
      <div class="tab-left">
        <slot name="left">
          <img class="logo" src="~@/assets/images/logo.png" alt="青听音乐" srcset="">
          <h5 class="logo-title">青听音乐</h5>
        </slot>
        <div class="tab-search">
          <div class="btn search-left">
            <i class="iconfont icon-shangyiyehoutuifanhui"></i>
          </div>
          <div class="btn search-right">
            <i class="iconfont icon-xiayiyeqianjinchakangengduo"></i>
          </div>
          <!-- 搜索 -->
          <div class="search-input">
            <i class="el-icon-search"></i>
            <input @focus="hostFocus('focus')" @blur="hostFocus('blur')" @keydown.enter="search" v-model="searchWord" id="input-edit" type="text" class="search-input-edit" placeholder="大家都在搜 薛之谦">
            <!-- 搜索列表 -->
            <div class="search-box" v-if="searchListVisable">
              <div class="tips"><p class="tips-txt">热搜榜</p></div>
              <ul class="search-list">
                <li class="search-item" v-for="(item,index) in hostList"  :key="index">
                  <div class="search-item-index">{{ index+1 }}</div>
                  <div class="search-item-info" @click="hostItemClick(item.searchWord)">
                    <p class="search-item-top">
                      <span class="search-item-name">{{ item.searchWord }}</span>
                      <span class="search-item-score">{{ item.score }}</span>
                      <span class="search-item-icon">
                        <img class="search-item-icon-img" v-if="item.iconUrl!==''" :src="item.iconUrl" alt="" srcset="">
                      </span>
                    </p>
                    <p class="search-item-bottom" v-if="item.content!==''">
                      <span class="search-item-description">{{ item.content }}</span>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    <!-- 顶部导航右面 -->
    <div class="tab-right">
      <slot name="right">
        <div class="tab-right-info">
          <div class="right-one">
            <img class="user-avater min-mar-r cur" src="~@/assets/images/default-user-avater.png" alt="用户头像" srcset="">
            <p class="user-name min-font-size cur">用户未登录</p>
            <i class="el-icon-caret-bottom min-mar-r cur red-hover"></i>
            <i class="iconfont icon-pifu min-mar-r cur red-hover"></i>
            <i class="iconfont icon-shezhi min-mar-r cur red-hover"></i>
            <i class="iconfont icon-youxiang min-mar-r cur red-hover"></i>
          </div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import {getHostDetail} from '@/request/Api.js'
export default {
  name:'Tabbar',
  created(){
    this.getHostDetail()
  },
  data(){
    return {
      hostList:[],
      // 控制热搜是否显示
      searchListVisable:false,
      // 搜索关键字
      searchWord:''
    }
  },
  methods:{
    // 获取热搜
    async getHostDetail(){
      const {data:res} = await getHostDetail() 
      if(res.code!==200){
        return
      }
      this.hostList = res.data
    },
    // 获取输入框焦点时候显示
    hostFocus(done){
      setTimeout(()=>{
        done== 'focus' ? this.searchListVisable=true : this.searchListVisable=false
      },200)
    },
    search(){
      this.$router.push(`/home/search?keywords=${this.searchWord}`)
      this.searchListVisable = false
    },
    hostItemClick(searchWord){
      console.log('出发了搜索函数');
      this.searchWord = searchWord
      this.search()
    }
  }
}
</script>

<style lang="less" scoped>
@color-tab:rgba(255,255,255);
@color-red:#ec4141;
@min-pad-lr:0px 1rem;
@min-mar-lr:0px 1rem;
@min-mar-r:0px 1rem 0px 0px;
@min-font-size: .6rem;
.min-pad-lr {
  padding: @min-pad-lr;
}
.min-mar-lr {
  margin: @min-mar-lr;
}
.min-mar-r {
  margin: @min-mar-r;
}
.min-font-size {
  font-size: @min-font-size;
}
.cur {
  cursor: pointer;
}
.red-hover:hover {
  color: @color-red;
  transition: .2s;
}
.tabbars {
  display: flex;
  width: 100%;
  height: 50px;
  background: @color-tab;
  box-shadow: 0px 0px 3px #ccc;
  .tab-left {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
    .logo {
      margin-left: .3rem;
      width: 26px;
      height: 26px;
      object-fit: cover;
    }
    .logo-title {
      margin-left: .3rem;
    }
  }
  .tab-search {
    margin-left: 1rem;
    .btn {
      float: left;
      margin-left: .4rem;
      font-size: .7rem;
      width: 1.4rem;
      height: 1.4rem;
      text-align: center;
      line-height: 1.4rem;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.101);
    }
    .search-input {
      position: relative;
      float: left;
      display: flex;
      align-items: center;
      margin-left: 1rem;
      width: 13rem;
      height: 1.4rem;
      padding: .4rem;
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.101);
      .search-input-edit {
        width: 100%;
        padding:0px .5rem;
        height: 1.2rem;
        outline: none;
        background-color: transparent;
        &::-webkit-input-placeholder {
          font-size: .2rem;
        }
      }
      // 搜索下面显示的搜索列表
      .search-box {
        z-index: 99;
        padding-bottom: .5rem;
        overflow-y: scroll;
        position: absolute;
        min-width: 100%;
        max-height: 28rem;
        top: 40px;
        min-height: 2rem;
        left: 0px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0px 0px 2px  rgb(225, 224, 224);
        .tips {
          padding: .4rem;
          .tips-txt {
            font-size: .8rem;
            color: rgb(164, 164, 164);
          }
        }
        .search-list {
          .search-item {
            height: 3rem;
            width: 100%;
            display: flex;
            padding: .4rem;
            font-size: .8rem;
            background: #fff;
            .search-item-index {
              display: inline-block;
              width: 10%;
              height: 100%;
              text-align: center;
              line-height: 2rem;
            }
            .search-item-info {
              width: 90%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .search-item-top {
                display: flex;
                align-items: center;
                .search-item-name {
                  margin-right: .4rem;
                }
                .search-item-score {
                  font-size: .6rem;
                  color: rgb(164, 164, 164);
                  margin-right: .4rem;
                }
                .search-item-icon-img {
                  width: 1.2rem;
                }
              }
              .search-item-bottom {
                width: 100%;
                .search-item-description {
                  display: inline-block;
                  width: 100%;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  font-size: .7rem;
                  color: rgb(164, 164, 164);
                }
              }
            }
            transition: .3s;
            cursor: pointer;
            &:hover {
              background: rgb(242, 242, 242);
            }
          }
        }
      }
    }
  }
  // tab 右侧
  .tab-right {
    width: 50%;
    height: 100%;
    .tab-right-info {
      padding: 0px 1rem;
      height: 100%;
      float: right;
      .right-one {
        height: 100%;
        display: flex;
        align-items: center;
        .user-avater {
          width: 1.8rem;
          height: 1.8rem;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>